<template>

  <v-container fluid class="custom-container" style="background-color: #f3f7fd" v-touch="{
      left: () => swipe('left'),
      right: () => goBack(),
    }" align="center" justify="center">

    <xy-header-top :title='pageTitle | strAbbr7'>
      <v-btn :ripple="false" icon slot="left" small @click="backHomeList">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <v-card flat>
      <div ref="scrollWrapper" class="scrollWrapper">
        <v-card-text style="padding: 0;min-height: 540px">

          <v-layout wrap pt-1 style="background-color:#f3f7fd">

            <v-flex xs6 sm6 md6 pa-1 v-for="(item,index) in categoryList" :key="index" @click="nextCategoryList(item)">
              <xy-material-category-card :category="item"></xy-material-category-card>
            </v-flex>
          </v-layout>

          <xy-scroll-status-bar :scroll-end="!loading" :loading="loading"></xy-scroll-status-bar>
        </v-card-text>
      </div>
    </v-card>

  </v-container>

</template>

<script>
    import {mapState} from 'vuex';
    import BScroll from 'better-scroll';
    import xyMaterialCategoryCard from "./card/MaterialCategoryCard";

    /**
     * 物料信息
     * @author Canaan
     * @date 2019/8/9 15:22.
     */
    export default {
        name: 'materialIndex',
        mounted() {
            this.$store.dispatch('loadMaterialCategoryOptions', this);
            this.listScroll = new BScroll(this.$refs.scrollWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullDownRefresh: true
            });

            this.listScroll.on('pullingDown', () => {
                this.categoryList = [];
                this.$store.dispatch('reloadMaterialCategoryOptions', this)
                    .then(() => {
                        this.listScroll.finishPullDown();
                    });

            });


        },
        components: {
            xyMaterialCategoryCard,
        },
        props: {},
        data() {
            return {
                listScroll: null,
                selectStack: [{
                    id: null,
                    name: '物料信息'
                }],
                categoryList: this.$store.state.materialCategoryOptions.options
            }
        },
        computed: {
            pageTitle() {
                if (this.selectStack && this.selectStack.length > 0) {
                    return this.selectStack[this.selectStack.length - 1].name;
                }
                return "物料信息";
            },
            ...mapState({
                options: state => state.materialCategoryOptions.options,
                loading: state => state.materialCategoryOptions.loading,
            }),
            ...mapState([
                'userContext'
            ])
        },
        methods: {
            swipe(cmd) {

            },
            nextCategoryList(category) {
                let childCategory = this.$store.getters.getMaterialCategoryByParent(category.id);
                if (childCategory && childCategory.length > 0) {
                    this.selectStack.push(category);
                    this.categoryList = childCategory;
                    this.listScroll.refresh();
                    return;
                }

                //如果是门店则跳转到materialList
                if (this.userContext.role === "STORE") {
                    this.$router.push({
                        name: 'materialList',
                        query: {
                            categoryId: category.id,
                            categoryName: category.name,
                        }
                    });
                } else {
                    //是品牌的话就跳转到
                    this.$router.push({});

                }
            },
            backHomeList() {
                this.$router.push("/");
            },
            goBack() {
                if (!this.selectStack || this.selectStack.length === 0 || !this.selectStack[this.selectStack.length - 1].id) {
                    return;
                }

                this.selectStack.pop();
                let category = this.selectStack[this.selectStack.length - 1];
                let childCategory = this.$store.getters.getMaterialCategoryByParent(category.id);
                this.categoryList = childCategory || [];
                this.listScroll.refresh();
            }
        },
        filters: {},
        watch: {
            options(val) {
                this.categoryList = val;
                this.listScroll.refresh();
            },

        },
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .scrollWrapper {
    height: 400px;
    background-color: #f3f7fd
  }

</style>
